<template>
  <div class="home">
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
      <van-swipe-item>
        <img class="img-home" src="@/assets/剑豪.png" alt />
      </van-swipe-item>
      <van-swipe-item>
        <img class="img-home" src="@/assets/弦月.png" alt />
      </van-swipe-item>
    </van-swipe>

    <!-- 分类 -->
    <van-grid>
      <van-grid-item icon="wap-home" text="公众号" @click="gotoPage('0','请搜索公众号\n古南岳')" />
      <van-grid-item icon="shop-collect" text="商城" @click="gotoPage('0','请搜索小程序\n古南岳山货')" />
      <van-grid-item
        icon="fire"
        text="简介"
        @click="gotoPage('1','https://mall.tsummoner.com/gunanyue/build/#/gunanyue/1')"
      />
      <van-grid-item
        icon="cluster"
        text="管理"
        @click="gotoPage('1','https://dev.tsummoner.com/gunanyueM/build/#/')"
      />
    </van-grid>

    <!-- 药联健康App -->
    <div class="top15"></div>
    <van-cell-group title="药联健康App">
      <router-link to="/uniondrughealthy/addjs">
        <van-cell title="注入js" is-link></van-cell>
      </router-link>

      <router-link to="/uniondrughealthy/pagejump">
        <van-cell title="页面跳转" is-link></van-cell>
      </router-link>
    </van-cell-group>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Grid,
  GridItem,
  ShareSheet,
  Cell,
  CellGroup,
  Toast,
  Swipe,
  SwipeItem,
  Image as VanImage,
} from "vant";
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(ShareSheet);

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Toast);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(VanImage);

// @ is an alias to /src
export default {
  name: "Home",
  components: {},

  data() {
    return {};
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    gotoPage(type, text) {
      if (type == 0) {
        Toast(text);
      } else if (type == 1) {
        window.open(text);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
  background-color: #f5f5f5;
}

.top15 {
  margin-top: 0.1rem;
}

.my-swipe .van-swipe-item {
  color: #39a9ed;
  font-size: 0.2rem;
  line-height: 1.5rem;
  text-align: center;
  background-color: #f5f5f5;
}
.my-swipe {
  height: 1.8rem;
}
.img-home {
  height: 100%;
  width: 100%;
}
</style>
